<template>
  <div class="flex-row">
    <el-input
      :name="name"
      :value="currentValue"
      :placeholder="placeholder?placeholder:label"
      :disabled="disabled"
      @input="onInputEvent"
    />
    <!-- <el-input-number
      :name="name"
      :min="0"
      :value="currentValue"
      :label="label"
      @input="onInputEvent"
    />-->
    <span v-if="placeholder" style="display: inline-block;width: 100px;">（{{ placeholder }}）</span>
  </div>
</template>

<script>
export default {
  name: 'TextInput',
  // eslint-disable-next-line vue/require-prop-types
  props: ['placeholder', 'label', 'name', 'value', 'disabled'],
  data() {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
    }
  },
  created() {
    this.currentValue = this.value
  },
  methods: {
    onInputEvent(value) {
      this.currentValue = value
        .replace(/[^\d^\.]+/g, '')
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      this.$emit('input', this.name, this.currentValue)
    }
  }
}
</script>

<style scoped></style>
